<template>
    <span>
      <span v-for="space in row._level" :key="space" class="ms-tree-space"/>
      <span v-if="iconShow()" class="tree-ctrl" @click="toggleIcon">
        <i v-if="!iconSelect()" class="el-icon-arrow-right"></i>
        <i v-else class="el-icon-arrow-down"></i>
      </span>
    </span>
</template>

<script>
export default {
  name: '',
  props: {
    row: {
      type: [Object],
      required: true
    },
    index: {
      type: [Number],
      required: true
    }
  },
  inject: ['toggleExpanded'],
  methods: {
    iconShow () {
      let record = this.row;
      return (record.children && record.children.length > 0);
    },
    iconSelect () {
      return this.row._expanded;
    },
    // 切换下级是否展开
    toggleIcon () {
      this.toggleExpanded(this.index);
    }
  }
}
</script>

<style lang="scss" scoped>
  $color: #606266;
  $space-width: 14px;
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: $space-width;
    height: 14px;
    &::before {
      content: ""
    }
  }

  .tree-ctrl{
    position: relative;
    cursor: pointer;
    color: $color;
    margin-left: -$space-width;
  }
</style>
